<template>
    <div class="tree-view">
        <div class="tree-view-row tree-view-header">
            <div v-for="col in columns" :key="col.index"
                 :style="colStyle(col)" class="title">{{col.label}}
            </div>
        </div>
        <el-tree ref="elTree"
                 :data="rows"
                 :show-checkbox="showCheckbox"
                 :default-expand-all="defaultExpandAll"
                 :lazy="lazy"
                 :props="props"
                 :load="load"
                 :node-key="nodeKey"
                 highlight-current
                 class="tree-view-box">
            <div slot-scope="{ data }" class="tree-view-row" @dblclick.stop="$emit('rowDblClick', data)">
                <el-table-cell
                    v-for="(col, index) in columns"
                    :key="col.id"
                    :col="col" :row="data"
                    :style="colStyle(col, index)"
                />
            </div>
        </el-tree>
    </div>
</template>
<script>
    import ElTableCell from '@comp/VTreeMenu/ElTableCell'

    export default {
        name: 'v-tree-menu',
        props: {
            // 表头列配置
            columns: {
                type: Array,
                default: Function
            },
            // 数据
            rows: {
                type: Array,
                default: Function
            },
            // 是否显示选择框
            showCheckbox: {
                type: Boolean,
                default: false
            },
            // 是否默认展开
            defaultExpandAll: {
                type: Boolean,
                default: true
            },
            // 是否是懒加载
            lazy: {
                type: Boolean,
                default: false
            },
            // 加载子树数据的方法，仅当 lazy 属性为true 时生效
            load: Function,
            // 配置选项，配置参考 官网
            props: {
                default () {
                    return {
                        children: 'children',
                        label: 'label',
                        icon: 'icon',
                        disabled: 'disabled'
                    }
                }
            },
            // 节点key
            nodeKey: String
        },
        components: {
            ElTableCell
        },
        methods: {
            // 列样式计算
            colStyle (col, index = 1) {
                const style = {
                    width: col.width || '60px'
                }
                if (index) style.textAlign = col.textAlign || 'center'
                else if (col.textAlign) style.textAlign = col.textAlign
                return style
            },
            // 设置当前节点通过key 若为 null 则取消当前高亮的节点
            setCurrentKey (key = null) {
                this.$refs.elTree.setCurrentKey(key)
            },
            // 设置当前节点
            setCurrentNode (node) {
                this.$refs.elTree.setCurrentNode(node)
            },
            // 获取当前节点的key
            getCurrentKey () {
                return this.$refs.elTree.getCurrentKey()
            },
            // 获取当前节点
            getCurrentNode () {
                return this.$refs.elTree.getCurrentNode()
            }
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
    .tree-view
        flex 1
        .tree-view-box
            flex 1
            align-items center
        .tree-view-row
            display flex
            flex 1
            justify-content flex-end
            align-items center
            flex-direction row
            &:first-child
                flex 1
                text-align left
        .title
            white-space nowrap
            overflow hidden
            height 40px
            line-height 40px
            min-width 0
            text-overflow ellipsis
            box-sizing border-box
            font-size 14px
            color #909399
            font-weight 800
        .tree-view-header
            border 1px solid #fff
            margin-bottom 2px
            background-color #fff
            &:last-child
                border-right 0
        .el-tree-node__content
            height 50px
            border-bottom 1px solid #ebeef5

</style>
